<template>
    <div>
        <el-dialog
            title="新增交通管制信息"
            :visible.sync="dialogVisible"
            width="60%"
            :before-close="handleClose"
            center
        >
            <el-form ref="form" :model="intersectionData" label-width="100px" :rules="rules">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="intersectionData.title" placeholder="请输入标题" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item label="正文" prop="content">
                    <el-input v-model="intersectionData.content" placeholder="请输入正文" maxlength="200" type="textarea"></el-input>
                </el-form-item>
                <!-- 取消/新增按钮 -->
                 <div class="dialog-footer">
                    <el-button @click="handleClose()">取消</el-button>
                    <el-button v-loading.lock="loading" style="margin-left: 40px" type="primary" @click="bindSave">新增</el-button>
                 </div>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>

    import { insertTmNotice } from '@/api/tm-road'

    export default {
        data(){
            return {
                dialogVisible: false,
                loading: false,
                intersectionData: {
                    title: '',
                    content: '',
                },
                rules: {
                   
                    title: [
                        { required: true, message: '请输入标题', trigger: 'blur' },
                        { max: 200, message: '标题不能超过200个字符', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入正文', trigger: 'blur' },
                        { max: 200, message: '正文不能超过200个字符', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            open(){
                this.intersectionData = {
                    title: '',
                    content: '',
                }
                this.dialogVisible = true
            },
            handleClose(){
                this.dialogVisible = false
            },
            async bindSave(){
                // 非空校验
                this.$refs.form.validate((valid) => {
                    if (valid) {
                        this.bindSaveRequest()
                    } else {
                        return false
                    }
                })
            },
            async bindSaveRequest(){
                this.loading = true;
                const { code = undefined } = await insertTmNotice({ ...this.intersectionData, publishDate: new Date().Format('yyyy-MM-dd hh:mm:ss') })
                if (code === 200) {
                    this.$message.success('新增成功')
                    this.$emit('refreshIntersectionData')
                    this.handleClose()
                } else {
                    this.$message.error('新增失败')
                }
                this.loading = false;
            }
        }
    }
</script>

<style lang="scss" scoped>
.dialog-footer{
    text-align: center;
    margin-top: 20px;
}
</style>